<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        {{message}}
    </div>
    <div id="root">
        {{message}}
    </div>
    <script>
        console.log(Vue)
        Vue.createApp({
            setup() {
                const message = "helloWord"
                return { message };
            }
        }).mount("#root");
    </script>
    <div id="aa">
        {{name}}
    </div>
    <div id="age">
        {{age}}
    </div>
    <script>
        Vue.createApp({
            setup() {
                const name = "zhangsan"
                return { name };
            }
        }).mount(aa);


        Vue.createApp({
            setup() {
                const age = 10;
                return { age };
            }
        }).mount("#age");
    </script>
    <div id="sum">
        {{n3}}
    </div>
    <script>
        Vue.createApp({
            //setup中不会用到this,this不会指到Vue实例
            //setup是vue3编写代码的入口
            setup() {
                const n3 = "hahha"
                return { n3 }
            }
        }).mount("#sum");
    </script>

</body>

</html>